// 购物车
import { } from "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";

// 2.判断本地存储是否存在商品id和数量
if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
    let $arrsid = localStorage.getItem('localsid').split(',');
    let $arrnum = localStorage.getItem('localnum').split(',');
    for (let $i = 0; $i < $arrsid.length; $i++) {
        rendCart($arrsid[$i], $arrnum[$i]);
    }
}

// 3.封装渲染购物车商品列表的函数
function rendCart(sid, num) {//编号  数量
    $.ajax({
        url: "http://10.31.165.61/JS2012/mall360/php/cartlist.php",
        dataType: "json",
        data: {
            datasid: sid
        }
    }).done(function (data) {
        let $copy_comm = $(".tables .commodity:hidden").clone(true, true);
        $copy_comm.find(".pic").attr("src", data.picurl);//图片
        $copy_comm.find(".title").html(data.title);//标题
        $copy_comm.find(".price span").html(data.price);//单个价格

        $copy_comm.attr("data-price", data.price);//设置自定义属性把该商品的当价格传值过去
        $copy_comm.attr("data-sid", data.sid);//sid也一起传过去

        $copy_comm.find(".quantity_num").val(num);//数量
        $copy_comm.find(".total").html((data.price * num).toFixed(2));//当前商品总价

        $copy_comm.find(".check_goods input").prop("checked", true);//默认全部选择


        $copy_comm.css("display", "table-row"); //显示克隆的元素
        $(".tables tbody").append($copy_comm);//追加

        allprice();
    });
}

// 4.封装函数统计商品的数量和总价(多次涉及改变，所有封装)
function allprice() {
    let $allnum = 0;//存储商品的数量
    let $allprice = 0; //存储商品的总价
    $(".commodity:visible").each(function (index, element) {
        if ($(this).find(".check_goods input").prop("checked")) {//判断当前的商品列表前面的复选框是否是选中的
            $allnum += parseInt($(this).find(".quantity_num").val());
            $allprice += parseFloat($(this).find(".total").html());
        }
    });
    $(".jnum").html($allnum);//赋值总的数量
    $(".all_price").html($allprice.toFixed(2));//赋值总的价格
}




//5.全选
//默认全选
$(".all_select").prop("checked", true);
$(".check_all input").prop("checked", true);
//头部全选
$(".check_all input").on("click", function () {
    $(".commodity:visible").find("input:checkbox").prop("checked", $(this).prop("checked"));
    $(".check_all input").prop("checked", $(this).prop("checked"));
    allprice();
});
//商品内的复选框
$(".tables").on("click", "input:checkbox", function () {
    if ($(".commodity:visible").find("input:checkbox").length === $(".commodity:visible").find("input:checked").length) {
        $(".check_all input").prop("checked", true);
        $(".all_select").prop("checked", true);
    } else {
        $(".check_all input").prop("checked", false);
        $(".all_select").prop("checked", false);
    }
    allprice();
});
//结算时的全选
$(".all_select").on("click", function () {
    $(".commodity:visible").find("input:checkbox").prop("checked", $(this).prop("checked"));
    $(".check_all input").prop("checked", $(this).prop("checked"));
    allprice();
});


// :parent当前元素的直接父元素

// 6.数量的改变
//加
$(".quantity_add").on("click", function () {
    let $num = $(this).parent().find(".quantity_num").val();//当前该商品的数量
    $num++;
    $(this).parent().find(".quantity_num").val($num);//重新赋值
    $(this).parents(".commodity").find(".total").html(singleprice($(this)));//计算单个商品的总价格
    allprice(); //计算总价
    localStorageData($(this)); //重新将数量添加到本地存储
});
//减
$(".quantity_red").on("click", function () {
    let $num = $(this).parent().find(".quantity_num").val();//当前该商品的数量
    $num--;
    if ($num <= 1) {
        $num = 1;
    }
    $(this).parent().find(".quantity_num").val($num);//重新赋值
    $(this).parents(".commodity").find(".total").html(singleprice($(this)));//计算单个商品的总价格
    allprice(); //计算总价
    localStorageData($(this));//重新将数量添加到本地存储
});



$(".quantity_num").on("input", function () {
    let $reg = /^\d+$/;
    if (!$reg.test($(this).val())) {
        $(this).val(1);
    }
    //限制范围，最多为999,最少1
    if ($(this).val() >= 1000) {
        $(this).val(999);
    } else if ($(this).val() == 0) {
        $(this).val(1);
    }

    $(this).parents(".commodity").find(".total").html(singleprice($(this)));//计算单个商品的总价格
    allprice();
    localStorageData($(this));//重新将数量添加到本地存储
})


//封装函数实现小计的改变
function singleprice(obj) {//obj:当前操作的元素对象。
    // let $price = bo
    let $price = obj.parents(".commodity").attr("data-price");
    let $num = obj.parent().find("input").val();
    return parseFloat($price * $num).toFixed(2);
}


// 7.将修改后的值存的本地存储里面
let $arrsid = []; //存储的商品编号
let $arrnum = []; //存储商品的数量

function getLocalStorage() {
    if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
        $arrsid = localStorage.getItem('localsid').split(',');
        $arrnum = localStorage.getItem('localnum').split(',');
    } else {
        $arrsid = [];
        $arrnum = [];
    }
}

// 封装函数实现本地存储。
// 获取当前商品的sid,通过商品的sid才能找到对应的数量。
function localStorageData(obj) {
    getLocalStorage();
    let $sid = obj.parents(".commodity").attr("data-sid");//获取当前操作商品的sid
    $arrnum[$arrsid.indexOf($sid)] = obj.parent().find("input").val();//重新赋值
    localStorage.setItem("localnum", $arrnum);//重新写入本地存储
}


// 8.删除购物车商品列表
const $mask = $(".dialog_box .mask");//遮罩层
const $del_dialog = $(".del_dialog");//删除对话框
const $dialog_close = $(".dialog_close");//关闭确认框按钮
const $btn_confirm = $(".btn_confirm");//确认删除按钮
const $btn_cancel = $(".btn_cancel");//取消删除按钮
$(".js_del").on("click", function () {
    $(".dialog_text").html("好货不等人，确定删除此商品吗？");
    $mask.show();
    $del_dialog.show();
    // unbind('click') 点击事件嵌套时，在下一次点击的时候先解绑点击事件，然后再注册点击事件，防止嵌套后多次触发
    $dialog_close.unbind('click').on("click", function () {//关闭按钮
        $mask.hide();
        $del_dialog.hide();
    });
    $btn_cancel.unbind('click').on("click", function () {//取消按钮
        $mask.hide();
        $del_dialog.hide();
    });
    $btn_confirm.unbind('click').on("click", () => {//确认删除按钮
        $mask.hide();
        $del_dialog.hide();
        $(this).parents(".commodity").remove();
        delstorage($arrsid, $(this).parents(".commodity").attr("data-sid"));
        allprice();
    });
});
$(".del_select").on("click", function () {
    $(".dialog_text").html("确定要删除所选商品吗？");
    $mask.show();
    $del_dialog.show();
    $dialog_close.unbind('click').on("click", function () {//关闭按钮
        $mask.hide();
        $del_dialog.hide();
    });
    $btn_cancel.unbind('click').on("click", function () {//取消按钮
        $mask.hide();
        $del_dialog.hide();
    });
    $btn_confirm.unbind('click').on("click", () => {//确认删除按钮
        $mask.hide();
        $del_dialog.hide();
        $(".commodity:visible").each(function (index, element) {
            if ($(this).find(".check_goods input").is(":checked")) {
                $(this).remove();//删除选中的商品
                delstorage($arrsid, $(this).attr("data-sid"));//删除该商品值本地存储的sid和数量
                allprice();//重新计算总价和数量
            }
        });
    });
});

// 封装函数实现删除该商品在本地存储里面的sid和num
function delstorage(arrsid, sid) {  //arrsid:数组   sid:数组中对应的值
    getLocalStorage();
    let $index = -1;
    $.each(arrsid, function (index, value) {
        if (value == sid) {
            $index = index;//满足条件的值对应的索引赋值给$index
        }
    });

    //获取对应的索引进行删除
    $arrsid.splice($index, 1);
    $arrnum.splice($index, 1);

    //重新存入本地存储
    localStorage.setItem("localsid", $arrsid);
    localStorage.setItem("localnum", $arrnum);

}
